<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>新闻频道-列表</title>
    <meta name="viewport" content="width=device-width, initial-scale=1 user-scalable=no">
    <link rel="stylesheet" href="css/style.css">
    <link rel="stylesheet" href="js/swiper.min.css">
</head>
<body>
    <!-- <div class="product-detail">
        <div class="nav-top">
            <div class="head-left">
                <a class="goback" href="javascript:history.go(-1);"><img class="left-arrow" src="image/left.png" alt=""></a>
                <div class="head-label">
                    <img src="image/logo-1.png" alt="">
                    <span>新闻频道 </span>
                </div>
            </div>
            <a class="menus" href=""><img src="image/menu.png" alt=""></a>
        </div>
    </div> -->
    <div class="news-detail">
        <div class="nav-top">
            <div class="head-label">
                <a class="goback" href="javascript:history.go(-1);"><img class="left-arrow" src="image/left.png" alt=""></a>
                <img src="image/logo-1.png" alt="">
            </div>
            <span>新闻频道</span>
            <div class="nav-img-right">
                <a class="user-home-img" href=""><img src="image/user.png" alt=""></a>
                <a class="menus" href="javascript:void;"><img id="menu-arrow"src="image/menu.png" alt=""></a>
                <img id="down-arrow" src="image/down.png" alt="">
            </div>
        </div>
        <!-- 顶部menu导航菜单 -->
        <div class="nav-menu">
            <ul>
                <li><a href="">关注</a></li>
                <li><a href="">新闻</a></li>
                <li><a href="">资讯</a></li>
                <li><a href="">产品</a></li>
                <li><a href="">技术</a></li>
                <li><a href="">新闻</a></li>
                <li><a href="">资讯</a></li>
                <li><a href="">产品</a></li>
                <li><a href="">技术贴</a></li>
            </ul>
        </div>
    </div>
    <!-- 新闻详情 -->
    <div class="content newsChannel">
        <!-- 滑动导航 -->
        <div class="slide-nav mescroll-touch-x">
            <div id="nav" class="nav">
                <ul class="list" id="list">
                    <li><a href="newsChannel.html">技术百科</a></li>
                    <li><a href="newsChannel.html">典型应用</a></li>
                    <li><a href="newsChannel.html">解决方案</a></li>
                    <li><a href="newsChannel.html">故障及维修</a></li>
                    <li><a href="newsChannel.html">名称</a></li>
                    <li><a href="newsChannel.html">技术百科</a></li>
                    <li><a href="newsChannel.html">故障及维修</a></li>
                    <li><a href="newsChannel.html" class="col">名称</a><span></span></li>
                </ul>
            </div>
            <div class="shadow"></div>
        </div>
        <div class="item-1">
            <ul>
                <li class="type-1">
                    <a class="type-link" href="">
                        <div class="img-box"><img src="image/wjy.jpg" alt=""></div>
                        <div class="titles">
                            <p>浩亭：不断创新，“智”造万物互联的工业世界</p>
                            <p><span class="col82">中国传动网</span><img src="image/mes.png" alt=""><span class="col32">8356</span></p>
                        </div>
                    </a>
                </li>
                <li class="type-1">
                    <a class="type-link" href="">
                        <div class="img-box"><img src="image/test-1.jpg" alt=""></div>
                        <div class="titles">
                            <p>浩亭：不断创新，“智”造万物互联的工业世界</p>
                            <p><span class="col82">中国传动网</span><img src="image/mes.png" alt=""><span class="col32">8356</span></p>
                        </div>
                    </a>
                </li>
                <li class="type-1">
                    <a class="type-link" href="">
                        <div class="img-box"><img src="image/wjy.jpg" alt=""></div>
                        <div class="titles">
                            <p>浩亭：不断创新，“智”造万物互联的工业世界</p>
                            <p><span class="col82">中国传动网</span><img src="image/mes.png" alt=""><span class="col32">8356</span></p>
                        </div>
                    </a>
                </li>
                <li class="type-1">
                    <a class="type-link" href="">
                        <div class="img-box"><img src="image/test-1.jpg" alt=""></div>
                        <div class="titles">
                            <p>浩亭：不断创新，“智”造万物互联的工业世界</p>
                            <p><span class="col82">中国传动网</span><img src="image/mes.png" alt=""><span class="col32">8356</span></p>
                        </div>
                    </a>
                </li>
                <li class="type-2">
                    <a class="type-link" href="">
                        <p>浩亭：不断创新，“智”造万物互联的工业世界浩亭：不断创新，“智”造万物互联的工业世界</p>
                        <p><span class="col82">中国传动网</span><img src="image/mes.png" alt=""><span class="col32">8356</span></p>
                    </a>
                </li>
                <li class="type-2">
                    <a class="type-link" href="">
                        <p>浩亭：不断创新，“智”造万物互联的工业世界</p>
                        <p><span class="col82">中国传动网</span><img src="image/mes.png" alt=""><span class="col32">8356</span></p>
                    </a>
                </li>
                <li class="type-3">
                    <a class="type-link" href="">
                        <img class="new-video" src="image/test-3.jpg" alt="" width="100%">
                        <img class="player" src="image/player.png" alt="">
                    </a>
                    <div class="video-intro">
                        <p>浩亭：不断创新，“智”造万物互联的工业世界浩亭：不断创新，“智”造万物互联的工业世界</p>
                        <p><span class="col82">中国传动网</span><img src="image/mes.png" alt=""><span class="col32">8356</span></p>
                    </div>
                </li>
                <li class="type-1">
                    <a class="type-link" href="">
                        <div class="img-box"><img src="image/test-1.jpg" alt=""></div>
                        <div class="titles">
                            <p>浩亭：不断创新，“智”造万物互联的工业世界</p>
                            <p><span class="col82">中国传动网</span><img src="image/mes.png" alt=""><span class="col32">8356</span></p>
                        </div>
                    </a>
                </li>
                <li class="type-1">
                    <a class="type-link" href="">
                        <div class="img-box"><img src="image/wjy.jpg" alt=""></div>
                        <div class="titles">
                            <p>浩亭：不断创新，“智”造万物互联的工业世界</p>
                            <p><span class="col82">中国传动网</span><img src="image/mes.png" alt=""><span class="col32">8356</span></p>
                        </div>
                    </a>
                </li>
                <li class="type-1">
                    <a class="type-link" href="">
                        <div class="img-box"><img src="image/test-1.jpg" alt=""></div>
                        <div class="titles">
                            <p>浩亭：不断创新，“智”造万物互联的工业世界</p>
                            <p><span class="col82">中国传动网</span><img src="image/mes.png" alt=""><span class="col32">8356</span></p>
                        </div>
                    </a>
                </li>
                <li class="type-1">
                    <a class="type-link" href="">
                        <div class="img-box"><img src="image/wjy.jpg" alt=""></div>
                        <div class="titles">
                            <p>浩亭：不断创新，“智”造万物互联的工业世界</p>
                            <p><span class="col82">中国传动网</span><img src="image/mes.png" alt=""><span class="col32">8356</span></p>
                        </div>
                    </a>
                </li>
                <li class="type-2">
                    <a class="type-link" href="">
                        <p>浩亭：不断创新，“智”造万物互联的工业世界</p>
                        <p><span class="col82">中国传动网</span><img src="image/mes.png" alt=""><span class="col32">8356</span></p>
                    </a>
                </li>
                <li class="type-2">
                    <a class="type-link" href="">
                        <p>浩亭：不断创新，“智”造万物互联的工业世界浩亭：不断创新，“智”造万物互联的工业世界</p>
                        <p><span class="col82">中国传动网</span><img src="image/mes.png" alt=""><span class="col32">8356</span></p>
                    </a>
                </li>
                <li class="type-3">
                    <a class="type-link" href="">
                        <img class="new-video" src="image/test-3.jpg" alt="" width="100%">
                        <img class="player" src="image/player.png" alt="">
                    </a>
                    <div class="video-intro">
                        <p>浩亭：不断创新，“智”造万物互联的工业世界</p>
                        <p><span class="col82">中国传动网</span><img src="image/mes.png" alt=""><span class="col32">8356</span></p>
                    </div>
                </li>
            </ul>
        </div>
    </div>
    <script type="text/javascript" src="http://img.chuandong.com/common/script/jquery.js"></script>
    <script type="text/javascript" src="js/common.js"></script>
    <script src="js/swiper.min.js"></script>
    <script src="js/jqthumb.min.js"></script>
    <script>
        var swiper = new Swiper('.swiper-container', {
            //分页
            pagination: {
                el: '.swiper-pagination',
            },
            //导航按钮
            navigation:{
                nextEl: '.swiper-button-next',
                prevEl: '.swiper-button-prev',
            },
            loop:true,//循环 最后面一个往后面滑动会滑到第一个
            observer: true,//修改swiper自己或子元素时，自动初始化swiper
            observeParents: true,//修改swiper的父元素时，自动初始化swiper
            // effect:"flip"//3d效果
        });
        // $('.news-lab li').hover(function () {
        //     var index = $(this).index()
        //     console.log('index',index)
        //     $('.news-lab li').eq(index).find('span.first-child').click(function () {
        //         $('.news-lab li').eq(index).find('span.line').css({'background':'#ff3531'})
        //         $('.news-lab li').eq(index).siblings().find('span.line').css({'background':'#fff'})
        //     })
        // },function () {

        // })
        $(function () {
            $('.img-box img').jqthumb({
                width: 115,
                height: 100,
            })
        })
    </script>
    <script>
        $(document).ready(function() {
            var index = null
            for (let i = 0;i < $('.list li').length;i++) { 
                if ($('.list li').eq(i).find('a').hasClass('col')) {
                    console.log('i',i)
                    index = i
                }
            }
            curItem(index)
        });

        function curItem(index) {
            if(index === -1) {
                return
            }
            var curDOM = $(".list a").eq(index), // 当前的a DOM元素
                viewDOM = $(".nav"), // 视图 DOM元素
                viewWidth = viewDOM.width(), // 视图宽度
                leftRange = curDOM.offset().left, // 当前的a DOM元素距离视图DOM最左边的距离
                addedValue = 20; // 附加值，自己定义。主要为了在滚动后，显示出后面的菜单
            if (index > 3) {
                addedValue = 400; // 附加值，自己定义。主要为了在滚动后，显示出后面的菜单
            }
                
            console.log('curDOM',curDOM)
            if(leftRange + curDOM.width() + addedValue > viewWidth) {
                console.log('index1',index)
                // 如果当前的 A DOM元素距离左边的距离，大于视图宽度，说明是看不到的状态
                var left = viewDOM.scrollLeft() + (leftRange + curDOM.width() - viewWidth + addedValue)
                viewDOM.animate({
                    scrollLeft: left
                },400)
            } else if(leftRange - curDOM.width() < viewDOM.scrollLeft()) {
                console.log('index2',index)
                // 如果当前的 A DOM元素距离左边的距离，小于视图scrollLeft的值，说明是看不到的状态
                var left = viewDOM.scrollLeft() + leftRange - addedValue 
                viewDOM.animate({
                    scrollLeft: left
                },400)
            }
            // curDOM.addClass("col").siblings().removeClass("col");
            // viewDOM.find('li').eq(index).append('<span></span>').siblings().find('span').remove()
        }
    </script>
</body>
</html>